import React, { Component } from 'react';
import axios from 'axios';
import { Spin } from 'antd';
import { NavLink } from 'react-router-dom';

import './Broadcasting.scss';

class Com extends Component {
    constructor (props) {
      super(props)
      this.state = {
          ListName : '热门',
          BroadcastingList : [],
          loading : true
      }
    }

    aaa (e) {
        console.log(e)
        this.setState({
            ListName : e,
            loading : true
        })
        axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+e+'&type=radio&limit=60&offset=0')
        .then(data => {
            this.setState({
                BroadcastingList : data.data.data.djRadios,
                loading : false
            })
            console.log(data)
        })
    }

    componentDidMount () {
        axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s=热门&type=radio&limit=60&offset=0')
        .then(data => {
            this.setState({
                BroadcastingList : data.data.data.djRadios,
                loading : false
            })
        })
      }
  
    render () {
      return (
        <div className = "BroadcastingList">
            <div className="BroadcastingList-left">
                <ul>
                    <hr/>
                    <li>
                        <NavLink to="/musichall/broadcasting/热门" onClick={()=>{this.aaa('热门')}}><hr/>热门</NavLink>
                    </li>
                    <hr/>
                    <li>
                        <NavLink to="/musichall/broadcasting/晚上" onClick={()=>{this.aaa('晚上')}}><hr/>晚上</NavLink>
                    </li>
                    <hr/>
                    <li>
                        <NavLink to="/musichall/broadcasting/心情" onClick={()=>{this.aaa('心情')}}><hr/>心情</NavLink>
                    </li>
                    <hr/>
                    <li>
                        <NavLink to="/musichall/broadcasting/主题" onClick={()=>{this.aaa('主题')}}><hr/>主题</NavLink>
                    </li>
                    <hr/>
                    <li>
                        <NavLink to="/musichall/broadcasting/场景" onClick={()=>{this.aaa('场景')}}><hr/>场景</NavLink>
                    </li>
                    <hr/>
                    <li>
                        <NavLink to="/musichall/broadcasting/曲风" onClick={()=>{this.aaa('曲风')}}><hr/>曲风</NavLink>
                    </li>
                    <hr/>
                    <li>
                        <NavLink to="/musichall/broadcasting/语言" onClick={()=>{this.aaa('语言')}}><hr/>语言</NavLink>
                    </li>
                    <hr/>
                    <li>
                        <NavLink to="/musichall/broadcasting/人群" onClick={()=>{this.aaa('人群')}}><hr/>人群</NavLink>
                    </li>
                    <hr/>
                    <li>
                        <NavLink to="/musichall/broadcasting/乐器" onClick={()=>{this.aaa('乐器')}}><hr/>乐器</NavLink>
                    </li>
                    <hr/>
                </ul>
            </div>
            <div className="BroadcastingList-right">
                <h3>
                    { this.state.ListName }
                    <hr/>
                </h3>
                <ul>
                    {
                        this.state.loading
                        ?
                        <Spin size="large" spinning="true"/>
                        :
                        this.state.BroadcastingList.map((item, index) => {
                        return (
                            <li key={ item.id }>
                                <div>
                                    <img src={ item.picUrl } alt=""/>
                                </div>
                                <p>{ item.name }</p>
                                <span>播放量：{ item.subCount }万</span>
                            </li>
                        )
                        })
                    }
                </ul>
            </div>
        </div>
      )
    }
  }
  
  export default Com;